<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
 #main{ text-align:center;}
 #float{
     position:absolute;
     left:30px;
     top:60px; 
     z-index:1;
 }
 #close{
     position:absolute;
     top:60px;
     left:134px;
     z-index:2;
     cursor:hand;
 }
</style>
<script>
 
 // 训练要点
 // （1）使用getElementById()获得层对象。
 // （2）使用currentStyle或getComputedStyle()获得层的位置
 // （3）使用display属性隐藏层
 // （4）使用scrollTop获取滚动条滚动的距离

 //（1）在页面中插入两个层，把图片和关闭按钮分别插入到两个层中，并且设置关闭按钮在图片层之上。
 //（2）在关闭按钮层上设置鼠标单击事件，当鼠标单击时调用隐藏两个层的函数，使用style对象的display属性来关闭按钮。
 //（3）在JavaScript中设置六个全局变量：closeTop、closeLeft、floatTop、floatLeft、closeObject、floatObject，分别表示关闭按钮、图片所在层的初始位置和两个层对象。
 //（4）设置两个函数place()和roll()，place()用来获取两个层的初始位置，roll()设置两个层随滚动条滚动。
 //（5）在place()函数中分别根据IE浏览器和Firefox浏览器获取层的初始位置。
 //（6）在roll()函数中设置两个层随滚动条滚动。
 //（7）当页面加载时调用函数place()，当滚动条滚动时调用函数roll()。

 
 //--------------在此开始你的代码--------------------
	 



 //--------------在此结束你的代码--------------------
</script>

</head>
<body>
<div id="close" ><img src="images/close.jpg"></div>
<div id="float"><img src="images/advpic.jpg"></div>
<div id="main"><img src="images/contentpic.jpg"></div>
</body>
</html>
